import React, { useState, useEffect, useRef } from 'react'
import { requestChartsForUserBuy } from '../../../api/statistic'
import * as echarts from 'echarts'

function UserBuy (props) {
    const [chart, setchart] = useState()
    const init = useRef(false)

    useEffect(() => {
        function chartRender (config) {
            const chartDom = document.getElementById('main')
            if (!init.current) {
                setchart(echarts.init(chartDom))
                init.current = true
            }
            chart && chart.clear()
            chart && chart.setOption(config)
        }

        requestChartsForUserBuy(props.userid).then(res => {
            chartRender(res.data)
        })
    }, [chart, init, props.userid])

    return (<div id="main" style={{
        height:'400px',
        paddingTop: '20px',
        boxSizing: 'border-box'
    }}>

    </div>)
}

export default UserBuy
